<template>
  <div>
    <div style="margin-top: 10px">
      <div v-for="(item, index) in jobList" style="margin-left: 150px; ">

        <div @click="detailEvent(item)" style="width: 20%; height: 230px; float: left; margin-bottom: 24px;
        margin-right: 14px; border-radius: 10px; border: 1px dashed #778899;
        padding: 20px; text-align: center">
          <div style="margin-top: 10px">{{item.name}}</div>
          <div style="margin-top: 2px">工作地点：{{item.city}}</div>
          <div style="margin-top: 2px; margin-bottom: 5px">
            薪资：
            <span style="color: #d73a49">{{item.salaryDown}}k</span>
            -
            <span style="color: #d73a49">{{item.salaryUp}}k</span>
          </div>
          <img :src="baseApi + '/recruit/' + item.img" style="width: 100px; height: 70px; border-radius: 10px">
          <div style="margin-top: 10px">{{item.requirement}}</div>

        </div>

      </div>
    </div>

    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cancelDetail"
      :visible="showDetail"
      title="企业详情"
      width="1000px"
    >
      <div style="margin-bottom: 10px; margin-left: 50px; margin-right: 50px;">
        <div><img :src="baseApi + '/recruit/' + book.img" style="width: 360px; height: 300px; border-radius: 10px">  </div>
        <div style="border-radius: 5px;padding: 20px 20px;height: 300px;margin-left: 380px;
          margin-top: -305px; background-color: #DCDCDC ">
          <div style="font-weight: bold">名称：{{book.companyName}}</div>
          <div style="margin-top: 13px;font-weight: bold">职位：{{book.name}}</div>
          <div style="margin-top: 13px;font-weight: bold">分类：{{book.cateName}}</div>
          <div style="margin-top: 13px;font-weight: bold">上班地点：{{book.city}}</div>
          <div style="margin-top: 13px;font-weight: bold">薪资待遇：{{book.salaryDown}}k-{{book.salaryUp}}k</div>
          <div style="margin-top: 13px;font-weight: bold">招聘人数：{{book.quantity}}</div>

          <div style="margin-top: 45px;">
            <el-button @click="applicantEvent" type="success" >
              投递简历
            </el-button>
            <el-button style="margin-left: 20px" @click="collectEvent(book.id)" type="primary" >
              收藏职位
            </el-button>
            <el-button style="margin-left: 20px" @click="interestEvent(book.companyId)" type="warning" >
              关注企业
            </el-button>
          </div>
        </div>
      </div>

      <div style="margin: 20px 50px 50px 50px; ">
        <div style="border-radius: 5px;height: 40px; padding: 15px 15px; background-color: #DCDCDC">
          <span @click="switchEvent(1)" :style="actR">任职要求</span>
          <span @click="switchEvent(2)" :style="actD">公司简介</span>
        </div>
        <div v-if="switchs === 1" style="padding: 10px 10px; background-color: #F5F5F5">
          {{book.requirement}}
        </div>
        <div v-else style="padding: 10px 10px; background-color: #F5F5F5">
          {{book.description}}
        </div>
      </div>
    </el-dialog>

    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cancelCU"
      :visible="visible"
      title="报名学车"
      width="500px"
    >
      <el-form ref="form" :model="form" size="small" label-width="80px">

        <el-form-item label="账号" prop="name">
          <el-input v-model="form.username" style="width: 370px;"/>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" style="width: 370px;"/>
        </el-form-item>

        <el-form-item label="电话" prop="phoneNum">
          <el-input v-model="form.phoneNum" style="width: 370px;"/>
        </el-form-item>

        <el-form-item label="车型" prop="typeId">
          <el-select v-model="form.typeId" style="width: 178px" placeholder="请先选择车型">
            <el-option
              v-for="(item, index) in carTypeList"
              :key="item.name + index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            type="datetime"
            v-model="form.birthday"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 370px;"
          />
        </el-form-item>

        <el-form-item label="用户名" prop="nickname">
          <el-input
            v-model="form.nickname"
            style="width: 370px;"
          />
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="form.sex" style="width: 178px">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电子邮箱" prop="email">
          <el-input
            v-model="form.email"
            style="width: 370px;"
          />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="text" @click="cancelCU">取消</el-button>
        <el-button type="primary" @click="submitCU">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getJobList } from '@/api/ceamJob'
  import { register } from '@/api/system/user'
  import { mapGetters } from 'vuex'
  import { add } from '../../../api/ceamJobCollect'
  import { addInterest } from '../../../api/ceamInterest'
  import {addApplication} from '@/api/ceamApplicant'

  export default {
    name: 'FrontHotel',
    data() {
      return {
        switchs: 1,
        actR: 'padding: 5px 10px ;background-color: #1E90FF; color: white',
        actD: '',
        jobId: undefined,
        form: {},
        jobList: [],
        visible: false,
        showDetail: false,
        form: {},
        book: {}
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    created() {
      this.listBook();
    },

    methods: {
      switchEvent(param) {
        this.switchs = param;
        if (param === 1) {
          this.actR = "padding: 5px 10px ;background-color: #1E90FF; color: white";
          this.actD = "";
        } else {
          this.actD = "padding: 5px 10px ;background-color: #1E90FF; color: white";
          this.actR = "";
        }
      },
      applicantEvent() {
        const data = this.book;
        data.jobId = this.jobId;
        data.id = null;
        addApplication(data).then(res => {
          this.$message({
            message: '投递成功',
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            message: '投递失败',
            type: 'warning'
          })
        })
      },
      collectEvent(id) {
        const data = {
          jobId: this.jobId
        }
        add(data).then(res => {
          this.$message({
            message: '收藏成功',
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            message: '收藏失败',
            type: 'warning'
          })
        })
      },
      interestEvent(companyId) {
        const data = {
          companyId: companyId
        }
        addInterest(data).then(res => {
          this.$message({
            message: '关注成功',
            type: 'success'
          })
        }).catch(error => {
          console.log('error...=', error)
          this.$message({
            message: '关注失败',
            type: 'warning'
          })
        })
      },
      detailEvent(item) {
        this.showDetail = true;
        this.book = item;
        this.jobId = item.id;
      },
      cancelDetail() {
        this.showDetail = false;
        this.book = {};
      },
      listBook() {
        const params = {
          page: 0,
          size: 100,
          status: 2
        }
        getJobList(params).then(res => {
          this.jobList = res.records;
        })
      },
      showAdd() {
        this.visible = true;
      },
      cancelCU() {
        this.visible = false;
      },
      submitCU() {
        register(this.form).then(res => {
          this.visible = false;
          this.showDetail = false;
          this.$message({
            message: '成功',
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            message: '失败',
            type: 'waring'
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
